<template>
    <div class="mask">


        <div class="box">
            <div class="p1">
                <h3>提示</h3>
            </div>
            <div class="p2">
                <img src="https://img.axureshop.com/0e/a4/ac/0ea4ac0fe33148ab863f5e2758608948/images/%E6%89%BF%E5%BB%BA%E5%95%86%E7%99%BB%E8%AE%B0/u168.png"
                    alt="">
                <span>确定要启用该账号么?</span>
            </div>

            <div class="but">
                <el-form-item>
                    <el-button type="primary" style="background-color: #FF9900; border: none;"
                        @click="confirm">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </div>
        </div>
    </div>
</template>
  
<script setup lang="ts">
// import { CloseBold } from "element-plus/icons";
import { ElMessage } from "element-plus";
import service from "../../utils/service";

// 声明属性
const props = defineProps<{
    state: string
    id: number;
}>();
// 声明事件
const emit = defineEmits<{
    (e: "hide"): void;
    (e: "upmydate"): void;
}>();
// 取消
const close = () => {
    // 触发隐藏事件
    emit("hide");
};

// console.log(props.state, props.id);
// 点击启用账号
const confirm = () => {
    const statex = props.state ? 1 : 2
    console.log(statex);

    service({
        url: "equipment/" + props.id,
        method: "patch",
        data: {
            "state": statex,
        }
    }
    ).then(() => {
        emit("hide");
        emit("upmydate");
    })
    ElMessage({
        message: "启用成功！",
        type: "success",
    });

}


</script>
  
<style scoped>
.mask {
    /* 遮罩层的写法 */
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.box {
    width: 600px;
    height: 200px;
    border: 1px solid #e5e4e4;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    z-index: 999;
}

.p1 {
    font-size: 20px;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p1 h3 {
    font-size: 16px;
    color: #666;
    font-weight: 800;

}

.p2 {
    width: 400px;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-left: 80px;

}

.p2 img {
    width: 30px;
    height: 30px;
}

.p2 span {
    font-size: 18px;
    color: #666666;
    font-weight: 800;
}

.but {
    margin-top: 32px;
    margin-left: 420px;
}
</style>